{% extends 'index.html' %}
{% load static %}

{% block mycss %}
    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'fishbone/html2canvas.js' %}"></script>
    <script src="{% static 'fishbone/fishBone2.js' %}"></script>
    <link rel="stylesheet" href="{% static 'fishbone/fishBone2.css' %}">
    <link href="{% static 'js/lib/layui/css/layui.css' %}" rel="stylesheet">
    <style>
        {#    修改tab切换页选中的颜色#}
        .nav-tabs.nav > li > a:hover, .nav-tabs.nav > li > a:focus {
            border-bottom: 1px solid #042c70;

        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border-bottom: 1px solid #042c70;

        }
    </style>
{% endblock %}

{% block title %}
    <span class="navbar-page-title">JSXQ业务模型构建 - 业务模型构建 </span>
{% endblock %}

{% block content %}
    <ul id="myTab" class="nav nav-tabs" style="margin: 15px 25px 0px">
        <li class="active" id="sjwj_tab">
            <a href="#data_mining" data-toggle="tab">数据挖掘模型</a>
        </li>
        <li id="zstl_tab">
            <a href="#knowledge_reasoning" data-toggle="tab">知识推理模型</a>
        </li>
        <li id="glfx_tab">
            <a href="#correlation_analysis" data-toggle="tab">关联分析模型</a>
        </li>

    </ul>
    <div id="myTabContent" class="tab-content">
        <!-- 数据挖掘内容 -->
        <div class="tab-pane fade in active" id="data_mining">
            <div class='container-fluid'>
                <!-- 数据挖掘模型导入 -->
                <button class="my-btn" style="margin-left: 10px;float: left" id="model_import"> 数据挖掘模型导入</button>
                <div class="form-group" style="margin: 50px 10px;padding: 10px; background-color: #ffffff">
                    <!-- 页面信息展示 -->
                    <table class="my-table" style="width: 100%">
                        <thead>
                        <tr>
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">模型名称</th>
                            <th style="text-align: center;">参数(节点标签)</th>
                            <th style="text-align: center;">参数(节点唯一标识)</th>
                            <th style="text-align: center;">模型配置</th>
                            <th style="text-align: center;">运行状态</th>
                            <th style="text-align: center;">模型操作</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for single_data in data_mining_obj %}
                            <tr style="text-align: center">
                                <td>{{ forloop.counter }}</td>
                                <td>{{ single_data.name }}</td>
                                <td>{{ single_data.label }}</td>
                                <td>{{ single_data.uuid }}</td>
                                <td>{{ single_data.configuration|default:"" }}</td>
                                <td id="{{ single_data.id }}dm_status">{{ single_data.status }}</td>
                                <td>
                                    <button class="my-btn" id="model_edit"
                                            onclick="model_edit({{ single_data.id }})"> 调整模型参数
                                    </button>
                                    <button class="my-btn" id="run_model" onclick="model_run({{ single_data.id }})">
                                        开始运行
                                    </button>
                                    <button class="my-btn" id="stop_model" onclick="model_stop({{ single_data.id }})">
                                        终止运行
                                    </button>
                                    <button class="my-btn" id="edit_model_configuration" onclick="edit_model_configuration({{ single_data.id }})">
                                        更改模型配置
                                    </button>
                                    <button class="my-btn" onclick="model_del({{ single_data.id }})">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>

                    </table>
                </div>
            </div>
        </div>

        <!-- 知识推理内容 -->
        <div class="tab-pane fade" id="knowledge_reasoning">
            <div class='container-fluid'>
                <!-- 知识推理模型导入 -->
                <button class="my-btn" style="margin-left: 10px;float: left" id="knowledge_reasoning_model_import">
                    知识推理模型导入
                </button>
                <div class="form-group" style="margin: 50px 10px;padding: 10px; background-color: #ffffff">
                    <!-- 页面信息展示 -->
                    <table class="my-table" style="width: 100%">
                        <thead>
                        <tr>
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">模型名称</th>
                            <th style="text-align: center;">参数(开始节点)</th>
                            <th style="text-align: center;">参数(关系类型)</th>
                            <th style="text-align: center;">模型配置</th>
                            <th style="text-align: center;">运行状态</th>
                            <th style="text-align: center;">模型操作</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for single_data in knowledge_reasoning_obj %}
                            <tr style="text-align: center">
                                <td>{{ forloop.counter }}</td>
                                <td>{{ single_data.name }}</td>
                                <td>{{ single_data.start_node_uuid }}</td>
                                <td>{{ single_data.relation_type }}</td>
                                <td>{{ single_data.configuration|default:"" }}</td>
                                <td id="{{ single_data.id }}kr_status">{{ single_data.status }}</td>
                                <td>
                                    <button class="my-btn" id="model_edit"
                                            onclick="knowledge_reasoning_model_edit({{ single_data.id }})"> 调整模型参数
                                    </button>
                                    <button class="my-btn" id="run_model"
                                            onclick="knowledge_reasoning_model_run({{ single_data.id }})"> 开始运行
                                    </button>
                                    <button class="my-btn" id="stop_model" onclick="knowledge_reasoning_model_stop({{ single_data.id }})">
                                        终止运行
                                    </button>
                                    <button class="my-btn" id="edit_knowledge_reasoning_model_configuration" onclick="edit_knowledge_reasoning_model_configuration({{ single_data.id }})">
                                        更改模型配置
                                    </button>
                                    <button class="my-btn" onclick="knowledge_reasoning_model_del({{ single_data.id }})">删除</button>

                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>

                    </table>
                </div>
            </div>
        </div>

        <!-- 关联分析内容 -->
        <div class="tab-pane fade" id="correlation_analysis">
            <div class='container-fluid'>
                <!-- 关联分析模型导入 -->
                <button class="my-btn" style="margin-left: 10px;float: left" id="correlation_analysis_model_import">
                    关联分析模型导入
                </button>
                <div class="form-group" style="margin: 50px 10px;padding: 10px; background-color: #ffffff">
                    <!-- 页面信息展示 -->
                    <table class="my-table" style="width: 100%">
                        <thead>
                        <tr>
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">模型名称</th>
                            <th style="text-align: center;">参数(开始节点uuid)</th>
                            <th style="text-align: center;">参数(终止节点uuid)</th>
                            <th style="text-align: center;">模型配置</th>
                            <th style="text-align: center;">运行状态</th>
                            <th style="text-align: center;">模型操作</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for single_data in correlation_analysis_obj %}
                            <tr style="text-align: center">
                                <td>{{ forloop.counter }}</td>
                                <td>{{ single_data.name }}</td>
                                <td>{{ single_data.start_node_uuid }}</td>
                                <td>{{ single_data.end_node_uuid }}</td>
                                <td>{{ single_data.configuration|default:"" }}</td>
                                <td id="{{ single_data.id }}ca_status">{{ single_data.status }}</td>
                                <td style="">
                                    <button class="my-btn" id="model_edit"
                                            onclick="correlation_analysis_model_edit({{ single_data.id }})"> 调整模型参数
                                    </button>
                                    <button class="my-btn" id="run_model"
                                            onclick="correlation_analysis_model_run({{ single_data.id }})"> 开始运行
                                    </button>
                                    <button class="my-btn" id="stop_model" onclick="correlation_analysis_model_stop({{ single_data.id }})">
                                        终止运行
                                    </button>
                                    <button class="my-btn" id="edit_knowledge_reasoning_model_configuration" onclick="edit_correlation_analysis_model_configuration({{ single_data.id }})">
                                        更改模型配置
                                    </button>
                                    <button class="my-btn" onclick="correlation_analysis_model_del({{ single_data.id }})">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block myjs %}
    <script src="{% static 'js/lib/layui/layui.js' %}"></script>
    <script>
        // 左侧菜单栏固定
        document.getElementById("jsxqywmxgj").style.display = 'block';
        document.getElementById("ywmxgj").style.backgroundColor = 'rgba(30,21,21,0.44)';

        // 设置选中的是哪类模型
        var sign = '{{ sign }}';
        console.log('sign', sign);
        if (sign === "0") {
            $("#data_mining").addClass(" in active");
            $("#knowledge_reasoning").removeClass(" in active");
            $("#correlation_analysis").removeClass(" in active");

            $("#sjwj_tab").addClass("active");
            $("#zstl_tab").removeClass("active");
            $("#glfx_tab").removeClass("active");
        } else if (sign === "1") {
            $("#data_mining").removeClass(" in active");
            $("#knowledge_reasoning").addClass(" in active");
            $("#correlation_analysis").removeClass(" in active");

            $("#sjwj_tab").removeClass("active");
            $("#zstl_tab").addClass("active");
            $("#glfx_tab").removeClass("active");
        } else if (sign === "2") {
            $("#data_mining").removeClass(" in active");
            $("#correlation_analysis").addClass(" in active");
            $("#knowledge_reasoning").removeClass(" in active");

            $("#sjwj_tab").removeClass("active");
            $("#zstl_tab").removeClass("active");
            $("#glfx_tab").addClass("active");
        }

        var import_sign = '{{ import_sign }}';
        console.log(import_sign);
        if (import_sign === "0") {
            $("#data_mining").addClass(" in active");
            $("#knowledge_reasoning").removeClass(" in active");
            $("#correlation_analysis").removeClass(" in active");

            $("#sjwj_tab").addClass("active");
            $("#zstl_tab").removeClass("active");
            $("#glfx_tab").removeClass("active");
        } else if (import_sign === "1") {
            $("#data_mining").removeClass(" in active");
            $("#knowledge_reasoning").addClass(" in active");
            $("#correlation_analysis").removeClass(" in active");

            $("#sjwj_tab").removeClass("active");
            $("#zstl_tab").addClass("active");
            $("#glfx_tab").removeClass("active");
        } else if (import_sign === "2") {
            $("#data_mining").removeClass(" in active");
            $("#correlation_analysis").addClass(" in active");
            $("#knowledge_reasoning").removeClass(" in active");

            $("#sjwj_tab").removeClass("active");
            $("#zstl_tab").removeClass("active");
            $("#glfx_tab").addClass("active");
        }

        var delete_sign = '{{ delete_sign }}';
        console.log('delete_sign', delete_sign);
        if (delete_sign === "0") {
            $("#data_mining").addClass(" in active");
            $("#knowledge_reasoning").removeClass(" in active");
            $("#correlation_analysis").removeClass(" in active");

            $("#sjwj_tab").addClass("active");
            $("#zstl_tab").removeClass("active");
            $("#glfx_tab").removeClass("active");
        } else if (delete_sign === "1") {
            $("#data_mining").removeClass(" in active");
            $("#knowledge_reasoning").addClass(" in active");
            $("#correlation_analysis").removeClass(" in active");

            $("#sjwj_tab").removeClass("active");
            $("#zstl_tab").addClass("active");
            $("#glfx_tab").removeClass("active");
        } else if (delete_sign === "2") {
            $("#data_mining").removeClass(" in active");
            $("#correlation_analysis").addClass(" in active");
            $("#knowledge_reasoning").removeClass(" in active");

            $("#sjwj_tab").removeClass("active");
            $("#zstl_tab").removeClass("active");
            $("#glfx_tab").addClass("active");
        }

        // 模型导入导入弹框
        $('#model_import').click(function () {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '490px'],
                    title: '数据挖掘模型导入',  //题目
                    content: "{% url 'model_import' %}"
                });
            })
        });

        // 知识推理模型导入弹框
        $('#knowledge_reasoning_model_import').click(function () {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '490px'],
                    title: '知识推理模型导入',  //题目
                    content: "{% url 'knowledge_reasoning_model_import' %}"
                });
            })
        });

        // 关联分析模型导入弹框
        $('#correlation_analysis_model_import').click(function () {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '490px'],
                    title: '关联分析模型导入',  //题目
                    content: "{% url 'correlation_analysis_model_import' %}"
                });
            })
        });

        // 调整数据挖掘模型参数
        function model_edit(model_id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '430px'],
                    title: '数据挖掘模型参数调整',  //题目
                    content: "{% url 'model_edit' %}?model_id=" + model_id
                });
            })
        }

        // 调整知识推理模型参数
        function knowledge_reasoning_model_edit(model_id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '430px'],
                    title: '知识推理模型参数调整',  //题目
                    content: "{% url 'knowledge_reasoning_model_edit' %}?model_id=" + model_id
                });
            })
        }

        // 调整关联分析模型参数
        function correlation_analysis_model_edit(model_id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '430px'],
                    title: '关联分析模型参数调整',  //题目
                    content: "{% url 'correlation_analysis_model_edit' %}?model_id=" + model_id
                });
            })
        }

        // 更改数据挖掘模型配置
        function edit_model_configuration(model_id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '430px'],
                    title: '数据挖掘模型配置更改',  //题目
                    content: "{% url 'model_configuration_edit' %}?model_id=" + model_id
                });
            })
        }

        // 更改知识推理模型配置
        function edit_knowledge_reasoning_model_configuration(model_id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '430px'],
                    title: '数据挖掘模型配置更改',  //题目
                    content: "{% url 'knowledge_reasoning_model_configuration_edit' %}?model_id=" + model_id
                });
            })
        }

        // 更改关联分析模型配置
        function edit_correlation_analysis_model_configuration(model_id) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['800px', '430px'],
                    title: '关联分析模型配置更改',  //题目
                    content: "{% url 'correlation_analysis_model_configuration_edit' %}?model_id=" + model_id
                });
            })
        }


        // 数据挖掘模型-删除
        function model_del(id) {
            zdconfirm('系统确认框', '你确认删除该条数据吗？', r => {
                if (r) {
                    $.ajax({
                        url: '{% url 'model_delete' %}',
                        type: 'get',
                        data: {"model_id": id},
                        success: function (res) {
                            if (res["code"] == "1") {
                                window.parent.location.href = '{% url "data_mining_model" %}?delete_sign=0';
                            } else {
                                alert(res["msg"]);
                            }
                        }
                    })
                }
            });
        }

        // 知识推理模型-删除
        function knowledge_reasoning_model_del(id) {
            zdconfirm('系统确认框', '你确认删除该条数据吗？', r => {
                if (r) {
                    $.ajax({
                        url: '{% url 'knowledge_reasoning_model_delete' %}',
                        type: 'get',
                        data: {"model_id": id},
                        success: function (res) {
                            if (res["code"] == "1") {
                                console.log("99999999999");
                                window.parent.location.href = '{% url "data_mining_model" %}?delete_sign=1';
                            } else {
                                alert(res["msg"]);
                            }
                        }
                    })
                }
            });
        }

        // 关联分析模型-删除
        function correlation_analysis_model_del(id) {
            zdconfirm('系统确认框', '你确认删除该条数据吗？', r => {
                if (r) {
                    $.ajax({
                        url: '{% url 'correlation_analysis_model_delete' %}',
                        type: 'get',
                        data: {"model_id": id},
                        success: function (res) {
                            if (res["code"] == "1") {
                                window.parent.location.href = '{% url "data_mining_model" %}?delete_sign=2';
                            } else {
                                alert(res["msg"]);
                            }
                        }
                    })
                }
            });
        }

        // 数据挖掘模型开始运行
        function model_run(model_id) {
            console.log('param',model_id);
            var status_tag = model_id + "dm_status";
            console.log(111,status_tag);
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,
                    shade: 0.3,
                    maxmin: true,
                    shadeClose: true,
                    area: ['800px', '450px'],
                    title: '数据挖掘模型运行',
                    content: "{% url 'model_run' %}?model_id=" + model_id
                });
            });

            $.ajax({
                url: '{% url 'model_status_edit' %}',
                type: 'post',
                data: {"model_id": model_id, "sign": "1", "msg": "模型运行"},
                success: function (res) {
                    if (res["code"] == "1") {
                        document.getElementById(status_tag).innerText = "运行中";
                    } else {
                        document.getElementById(status_tag).innerText = "模型运行异常！！！";
                    }
                }
            });
        }

        // 知识推理模型运行
        function knowledge_reasoning_model_run(model_id) {
            var status_tag = String (model_id) + "kr_status";
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,
                    shade: 0.3,
                    maxmin: true,
                    shadeClose: true,
                    area: ['800px', '450px'],
                    title: '知识推理模型运行',
                    content: "{% url 'knowledge_reasoning_model_run' %}?model_id=" + model_id
                });
            });

            $.ajax({
                url: '{% url 'knowledge_reasoning_model_status_edit' %}',
                type: 'post',
                data: {"model_id": model_id, "sign": "1", "msg": "模型运行"},
                success: function (res) {
                    if (res["code"] == "1") {
                        document.getElementById(status_tag).innerText = "运行中" ;
                    } else {
                        document.getElementById(status_tag).innerText = "模型运行异常！！！" ;
                    }
                }
            });
        }

        // 关联分析模型运行
        function correlation_analysis_model_run(model_id) {
            var status_tag = String (model_id) + "ca_status";
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,
                    shade: 0.3,
                    maxmin: true,
                    shadeClose: true,
                    area: ['800px', '450px'],
                    title: '关联分析模型运行',
                    content: "{% url 'correlation_analysis_model_run' %}?model_id=" + model_id
                });
            });

            $.ajax({
                url: '{% url 'correlation_analysis_model_status_edit' %}',
                type: 'post',
                data: {"model_id": model_id, "sign": "1", "msg": "模型运行"},
                success: function (res) {
                    if (res["code"] == "1") {
                        document.getElementById(status_tag).innerText = "运行中";
                    } else {
                        document.getElementById(status_tag).innerText = "模型运行异常！！！";
                    }
                }
            });
        }

        // 数据挖掘模型终止运行
        function model_stop(model_id) {
            var status_tag = String (model_id) + "dm_status";
            $.ajax({
                url: '{% url 'knowledge_reasoning_model_status_edit' %}',
                type: 'post',
                data: {"model_id": model_id, "sign": "2", "msg": "模型终止"},
                success: function (res) {
                    if (res["code"] == "1") {
                        document.getElementById(status_tag).innerText = "未运行";
                    } else {
                        document.getElementById(status_tag).innerText = "模型终止异常！！！";
                    }
                }
            });
        }

        // 知识推理模型终止运行
        function knowledge_reasoning_model_stop(model_id) {
            var status_tag = String (model_id) + "kr_status";
            $.ajax({
                url: '{% url 'knowledge_reasoning_model_status_edit' %}',
                type: 'post',
                data: {"model_id": model_id, "sign": "2", "msg": "模型终止"},
                success: function (res) {
                    if (res["code"] == "1") {
                        document.getElementById(status_tag).innerText = "未运行";
                    } else {
                        document.getElementById(status_tag).innerText = "模型终止异常！！！";
                    }
                }
            });
        }

        // 关联分析模型运行
        function correlation_analysis_model_stop(model_id) {
            var status_tag = String (model_id) + "ca_status";
            $.ajax({
                url: '{% url 'correlation_analysis_model_status_edit' %}',
                type: 'post',
                data: {"model_id": model_id, "sign": "2", "msg": "模型终止"},
                success: function (res) {
                    if (res["code"] == "1") {
                        document.getElementById(status_tag).innerText = "未运行";
                    } else {
                        document.getElementById(status_tag).innerText = "模型终止异常！！！";
                    }
                }
            });
        }
    </script>
{% endblock %}



